<script setup lang="ts">
import "axios";
import "@/assets/style/home.css";
import { onMounted, reactive } from "vue";
import { getWithCache } from "@/assets/script/cache";
import { useI18n } from "vue-i18n";
import { syncLangRef } from "@/assets/script/utils";
import axios from "axios";
import { backend_url } from "@/config";

const { t, locale } = useI18n();
syncLangRef(locale);

const state = reactive<Record<string, any>>({
  emailMarketing: false,
  loading: false,
});

async function emailMarketingChanged(value: boolean) {
  state.loading = true;
  try {
    const resp = await axios.post(`${backend_url}marketing/preference`, {
      email_marketing: value,
    });
    const data = resp.data;
    if (data.status) {
      state.emailMarketing = value;
      ElMessage({
        type: "success",
        message: t("update-success"),
      });
    } else {
      ElMessage({
        type: "error",
        message: data.error || t("update-failed"),
      });
      state.emailMarketing = !value;
    }
  } catch (error) {
    ElMessage({
      type: "error",
      message: t("network-error"),
    });
    state.emailMarketing = !value;
  } finally {
    state.loading = false;
  }
}

onMounted(async () => {
  try {
    const resp = await getWithCache("marketing/preference", 10);
    const data = resp.data;
    if (data.status) {
      state.emailMarketing = data.email_marketing;
    }
  } catch (error) {
    console.error("Failed to load marketing preference:", error);
  }
});
</script>

<template>
  <div class="form auth">
    <div class="title">
      <span>{{ t("marketing") }}</span>
      <el-form class="auth-form flex-form" label-position="left">
        <el-form-item :label="t('email-marketing')">
          <el-switch 
            :model-value="state.emailMarketing" 
            @change="emailMarketingChanged"
            :loading="state.loading"
          />
        </el-form-item>
        <div class="description">
          <p class="desc-text">{{ t("email-marketing-desc") }}</p>
          <p class="desc-detail">{{ t("email-marketing-detail") }}</p>
        </div>
      </el-form>
    </div>
  </div>
  <br />
</template>

<i18n>
{
  "zh": {
    "marketing": "营销邮件设置",
    "email-marketing": "接收营销邮件",
    "email-marketing-desc": "开启后，您将接收到来自 DeepTrain 的产品更新、新功能介绍等营销邮件。",
    "email-marketing-detail": "您可以随时在此页面更改偏好设置，或通过邮件中的退订链接停止接收营销邮件。",
    "update-success": "设置已更新",
    "update-failed": "设置更新失败",
    "network-error": "网络错误，请稍后重试"
  },
  "en": {
    "marketing": "Marketing Email Settings",
    "email-marketing": "Receive Marketing Emails",
    "email-marketing-desc": "When enabled, you will receive marketing emails from DeepTrain including product updates and new feature announcements.",
    "email-marketing-detail": "You can change your preferences on this page at any time, or unsubscribe through the link in marketing emails.",
    "update-success": "Settings updated successfully",
    "update-failed": "Failed to update settings",
    "network-error": "Network error, please try again later"
  }
}
</i18n>

<style scoped>
.auth-form {
  display: flex;
  flex-direction: column;
  width: calc(100% - 32px);
  margin: 24px 0;
}

.description {
  margin-top: 16px;
  padding: 16px;
  background-color: rgba(144, 147, 153, 0.1);
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.desc-text {
  font-size: 14px;
  margin: 0 0 8px 0;
  color: #606266;
  line-height: 1.5;
}

.desc-detail {
  font-size: 12px;
  margin: 0;
  color: #909399;
  line-height: 1.4;
}

@media (max-width: 540px) {
  .description {
    margin: 16px -8px 0 -8px;
  }
}
</style>
